<template>
	<!-- 会员页面 -->
	<view class="content">
		<view class="top">
			<image :src="list[0].configureAttribute.pictureURL" mode="widthFix"></image>
		</view>
		<view class="li1_content">
			<titleh3 :h4="'免费零食'" :p="'每日领1款，天天0元享'" :nuder="212"></titleh3>
			<view class="list_img">
				<view class="con">
					<view class="li" v-for="(item,index) in list[1].configureAttribute[0].list" :key="index">
						<image :src="item.listImages" mode="widthFix"></image>
						<view class="text">
							<view class="h4">{{item.name}}</view>
							<view class="p">{{item.displayName}}</view>
							<view class="span">{{item.retailPrice}}</view>
							<view class="button">0元领</view>
						</view>
					</view>
				</view>
			</view>
			<view class="title_p"><text>!</text>限量供应，购物满99可享</view>
			<view class="list_img">
				<view class="con">
					<view class="li" v-for="(item,index) in list[1].configureAttribute[1].list" :key="index">
						<image :src="item.listImages" mode="widthFix"></image>
						<view class="text">
							<view class="h4">{{item.name}}</view>
							<view class="p">{{item.displayName}}</view>
							<view class="span">{{item.retailPrice}}</view>
							<view class="button">0元领</view>
						</view>
					</view>
				</view>
			</view>
			<view class="title_p"><text>!</text>限量供应，购物满149可享</view>
		</view>
		<view class="li2_content">
			<titleh3 :h4="'旺旺会员专享卷'" :p="'每日2张，每日1号零点更新'" :nuder="770"></titleh3>
			<view class="list_img">
				<image :src="item.unReceiveImgUrl" mode="widthFix" v-for="(item,index) in list[2].configureAttribute"
					:key="index">
				</image>
			</view>
		</view>
		<view class="li3_content">
			<titleh3 :h4="'旺旺会员专享卷'" :p="'全场商品超值选购'" :nuder="108"></titleh3>
			<view class="list_img">
				<view class="con">
					<view class="li" v-for="(item,index) in list[3].configureAttribute.list" :key="index">
						<image :src="item.listImages" mode="widthFix"></image>
						<view class="text">
							<view class="h4">{{item.name}}</view>
							<view class="p">{{item.displayName}}</view>
							<view class="span">￥{{item.retailPrice}}</view>
							<image src="../../static/img/new_shopCart1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="bot_title">
				查看全部300+旺旺会员价商品<text> ></text>
			</view>
		</view>
		<view class="li3_content li4_content">
			<titleh3 :h4="'旺旺会员专享卷'" :p="'全场商品超值选购'" :nuder="108"></titleh3>
			<view class="list_img">
				<view class="con">
					<view class="li" v-for="(item,index) in list[4].configureAttribute.list" :key="index">
						<image :src="item.listImages" mode="widthFix"></image>
						<view class="text">
							<view class="h4">{{item.name}}</view>
							<view class="p">{{item.displayName}}</view>
							<view class="span">￥{{item.retailPrice}}</view>
							<image src="../../static/img/new_shopCart1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="bot_title">
				查看全部300+旺旺会员价商品<text> ></text>
			</view>
		</view>

		<view class="li1_content li3_content li5_content">
			<titleh3 :h4="'旺旺会员专享卷'" :p="'全场商品超值选购'" :nuder="108"></titleh3>
			<view class="list_img">
				<view class="con">
					<view class="li" v-for="(item,index) in list[5].configureAttribute.list" :key="index">
						<image :src="item.marketingPicture" mode="widthFix"></image>
						<view class="text">
							<view class="h4">{{item.rightsName}}</view>
							<view class="button" style="margin-top: 20px;">立即领取</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="botton">
			<text>旺旺会员权益细则</text>
		</view>
		<navigator url="../Recharge/Recharge" class="but">
			<view class="left">
				旺旺会员&ensp;49元/年
			</view>
			<view class="right">
				立即开通
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list: [],
			}
		},
		onLoad() {
			this.getJok() //显示当前页数的内容
		},
		methods: {
			getJok() {
				var that = this
				uni.request({
					url: 'https://srv.hotkidceo.com/appapi/api/root-ceo-content/ceoPage/pageList',
					data: {
						"channelId": null,
						"memberKey": "",
						"roleKey": "",
						"type": 1
					},
					success: (res) => {
						console.log("res", res.data);
						var r = res.data.data;
						that.list = that.list.concat(r)
						console.log("list", that.list);
					},
					method: 'POST',
				})
			}
		}
	}
</script>

<style lang="less">
	@width: (100vw / 375);

	.content {
		width: 100vw;
		background-color: #f5f5f5;
		padding-bottom: 50 * @width;

		.top {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.li1_content,
		.li2_content,
		.li3_content {
			width: 100%;
			margin: 15 * @width 0;
			border-radius: 25 *@width;
			background-color: #fff;
			overflow: hidden;
		}

		.li1_content {

			// 隐藏滚动条并可以滚动内容
			.list_img::-webkit-scrollbar {
				width: 0 !important;
			}

			.list_img {
				width: 100%;
				overflow: scroll;

				.con {
					width: 395 * @width;
					height: 220 * @width;
					padding: 2 * @width;
					display: flex;
					box-sizing: border-box;

					.li {
						text-align: center;
						width: 99 * @width;
						height: 200 * @width;
						border-radius: 9 * @width;
						box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
						margin-left: 10px;

						image {
							width: 99 * @width;
						}

						.text {
							padding: 0 10 * @width;

							.h4,
							.p {
								font-size: 15* @width;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.p {
								color: #aaa;
								font-size: 14 * @width;
								line-height: 1.5;
							}

							.span {
								font-size: 14 * @width;
								color: #aaa;
							}

							.button {
								width: 60 * @width;
								height: 20 * @width;
								margin: 4 * @width auto;
								background-color: #f5cd96;
								border-radius: 8 * @width;
								font-size: 12 * @width;
								line-height: 20 * @width;
							}
						}
					}
				}
			}

			.title_p {
				margin-left: 20* @width;
				margin-top: -15 * @width;
				margin-bottom: 10 * @width;
				color: #aaa;

				text {
					border: 1px solid #aaa;
					border-radius: 50%;
					width: 15 * @width;
					height: 15 * @width;
					text-align: center;
					line-height: 15 * @width;
					font-size: 12 * @width;
					display: inline-block;
					margin-right: 7 * @width;
				}
			}
		}


		.li2_content {
			width: 100%;

			.list_img {
				margin: 15 * @width 15 * @width;
				margin-top: 0;

				image {
					width: 172 * @width;
					height: 50 * @width;
				}

				image:nth-of-type(1) {
					width: 100%;
				}
			}
		}

		.li3_content {
			position: relative;
			overflow: auto;

			// 隐藏滚动条并可以滚动内容
			.list_img::-webkit-scrollbar {
				width: 0 !important;
			}

			.list_img {
				width: 100%;
				overflow: scroll;

				.con {
					width: 395 * @width;
					height: 210 * @width;
					padding: 2 * @width;
					display: flex;
					box-sizing: border-box;

					.li {
						position: relative;
						text-align: center;
						width: 129 * @width;
						height: 180 * @width;
						border-radius: 9 * @width;
						box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
						margin-left: 10px;

						image {
							width: 99 * @width;
						}

						.text {
							padding: 0 10 * @width;

							.h4,
							.p {
								font-size: 15* @width;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.p {
								color: #aaa;
								font-size: 14 * @width;
								line-height: 1.5;
							}

							.span {
								font-size: 14 * @width;
								color: #f12525;
							}

							image {
								position: absolute;
								right: 10 * @width;
								bottom: 15 * @width;
								width: 20 * @width;
								height: 20 * @width;
							}
						}
					}
				}

			}



			.title_p {
				margin-left: 20* @width;
				margin-top: -15 * @width;
				margin-bottom: 10 * @width;
				color: #aaa;

				text {
					border: 1px solid #aaa;
					border-radius: 50%;
					width: 15 * @width;
					height: 15 * @width;
					text-align: center;
					line-height: 15 * @width;
					font-size: 12 * @width;
					display: inline-block;
					margin-right: 7 * @width;
				}
			}

			.bot_title {
				position: absolute;
				left: 50%;
				bottom: 0 * @width;
				z-index: 99;
				transform: translateX(-50%);
				width: 300 * @width;
				height: 34 * @width;
				line-height: 34 * @width;
				text-align: center;
				border-radius: 17 * @width;
				font-weight: 800;
				background-color: #f4ca91;
			}
		}

		>.botton {
			margin-top: 10 * @width;
			text-align: center;
			font-size: 14 * @width;
		}


		.but {
			width: 350 * @width;
			height: 44 * @width;
			border-radius: 22 * @width;
			position: fixed;
			bottom: 60 * @width;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9999;
			background-image: url("../../static/img/but.png");
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30 * @width;
			box-sizing: border-box;

			.left {
				font-size: 18 * @width;
				font-weight: 900;
			}

			.right {
				font-size: 17 * @width;
				color: #f3ce9a;
			}
		}

		/* #ifdef APP */
		.but {
			bottom: 10 * @width;
		}

		/* #endif */
	}
</style>
